<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app"></div>

<script src="../js/vue.js"></script>
<script>
  // 1.创建Vue的实例对象
  const app = Vue.createApp({
    setup(props,context) {
      //引入ref
      const {ref} = Vue;

      const count = ref(0);
      const setCount = ()=>{
        // 修改数据更新视图必须加上.value
        count.value++
      }
      return {
        count,
        setCount
      }
    },

    // 我们在其他属性里面应用 setup() 函数里面的东西
    template: `
       <h1>{{count}}</h1>
       <button @click="setCount">点击增加</button>
    `

  });

  app.mount('#app');
</script>

</body>
</html>








































